<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>入库</title>
    <link rel="stylesheet" href="/sb/stock.css"/>
    <link rel="stylesheet" href="/layui/css/layui.css" media="all">
    <script src="/js/jquery-3.3.1.min.js"></script>
    <script src="/layui/layui.js"></script>

</head>
<body>
<div class="sp-wrapper">
    <h2 class="sp-title"><span>验货单入库</span></h2>
    <div class="sp-tool">
        <span class="fl"><b>单据编号：[[${detail.number}]]</b>
            <b>验货日期：[[${#dates.format(detail.createTime, 'yyyy-MM-dd HH:mm:ss')}]]</b>
            <b>验货总数量：[[${detail.quantity}]]</b>
            <b>已入库：[[${detail.inQuantity}]]</b>
            <b>验货人：[[${detail.checkoutUserName}]]</b>
            <b>QC报告： <span th:if="${detail.hasQcReport == 1}">有QC报告</span>
                        <span th:if="${detail.hasQcReport == 0}">没有QC报告</span>
            </b>
            <b>状态： <span th:if="${detail.stockInStatus == 1}">已入库</span>
                        <span th:if="${detail.stockInStatus == 0}">未入库</span></b>
        </span>
        <span class="fr">

            <i id="save" class="save" th:if="${detail.stockInStatus == 0}">确认入库</i>
        </span>
    </div>
    <div class="sp-table">
        <form id="stockinform" action="/checkout/stock_in" method="post">
            <input type="hidden" name="checkoutId" id="checkoutId"  th:value="${checkoutId}" />
        <table>
            <thead>
            <tr>
                <th>序号</th>
                <th>商品</th>
                <th>规格</th>
                <th>SKU</th>
                <th>数量</th>
                <th>已入库数量</th>
                <th>入库仓位</th>
                <th>入库数量</th>

            </tr>
            </thead>
            <tbody id="sp-data">
            <tr th:each="item:${detail.items}">
                <td th:text="${itemStat.index + 1}"></td>
                <td th:text="${item.goodsName}">
                </td>
                <td>
                    颜色：<i th:text="${item.colorValue}"></i>&nbsp;尺码：<i th:text="${item.sizeValue}"></i>
                </td>
                <td th:text="${item.specNumber}"></td>
                <td th:text="${item.quantity}">200</td>
                <td th:text="${item.inQuantity}">0</td>
<!--                <td>-->
<!--                    <span th:if="${item.inQuantity==item.quantity}">已全部入库</span>-->
<!--                    <span th:if="${item.inQuantity==0}">待入库</span>-->
<!--                    <span th:if="${item.inQuantity<item.quantity && item.inQuantity>0}">部分入库</span>-->
<!--                </td>-->
                <td>
                    <input type="text" class="locationNumber" name="locationNumber" placeholder="请输入仓位编码" autocomplete="off"/>
                    <input type="hidden" class="locationId" name="locationId"  value="0" />
                    <input type="hidden" name="checkoutItemId"  th:value="${item.id}" />
                    <input type="hidden" name="specId"  th:value="${item.specId}" />
                    <input type="hidden" name="specNumber"  th:value="${item.specNumber}" />

                    <input type="hidden" name="maxQuantity"  th:value="${item.quantity - item.inQuantity}" />
                    <span th:if="${item.specId==null||item.specId==0}" style="color: red">商品规格数据不存在</span>

                    <span th:if="${detail.stockInStatus == 1}" style="color: red">商品已入库</span>


<!--                    <i th:if="${item.specId!=null&&item.specId>0 && item.inQuantity < item.quantity}" class="enter" th:attr="data-id=${item.specNumber}">选择仓库</i>-->
                </td>
                <td><input type="number" name="quantity" class="quantity" autocomplete="off" placeholder="入库数量"/></td>
            </tr>

            </tbody>
        </table>
        </form>
    </div>
    <script>

            layui.use(['form','layer' ], function () {
                var form = layui.form
                    , layer = layui.layer;

            });

        $(function () {
            // console.log(JSON.stringify(housesData));

            function render(data) {

                for (var i = 0, n = data.length, tpl = ''; i < n; i++) {
                    tpl += '<li data-id="' + data[i].id + '" data-num="' + data[i].number + '">' + data[i].name + '</li>';
                }
                $('.sp-result').html(tpl);
            }

            function init() {
                var $box = $('<ul class="sp-result"></ul>').appendTo($('body'));
                var $status = false;
                var $locationId = null; //仓位ID
                var $locationNumber = null; //仓位编码
                var $quantity = null;//入库数量

                $(document).click(function (e) {
                    if ($status) {
                        $box.hide();
                        $status = false;
                    }
                });
                $('#sp-data').delegate('.locationNumber', 'click', function (e) {
                    e.stopPropagation();
                    var _this = $(this);
                    var _tr = _this.parent('td').parent('tr');
                    // $name = _this;
                    $locationNumber = _tr.find('.locationNumber'); //仓位编码
                    $locationId = _tr.find('.locationId'); //仓位id
                    $quantity = _tr.find('.quantity'); //数量

                    var _this = $(this);
                    var pos = _this.offset();
                    var x = pos.left;
                    var y = pos.top + _this.height();
                    $box.css({
                        left: x,
                        top: y
                    }).html('').hide();
                    $status = true;
                });
                $box.delegate('li', 'click', function (e) {
                    e.stopPropagation();
                    var _this = $(this);

                    $locationNumber.val(_this.attr('data-num'))
                    $locationId.val(_this.attr('data-id'))
                    // $quantity.val(_this.attr('data-quantity')); //数量

                    $box.hide();
                    $status = false;
                });
                $box.click(function (e) {
                    e.stopPropagation();
                });
                // 仓位搜索
                $('#sp-data').delegate('.locationNumber', 'input', function (e) {
                    e.stopPropagation();
                    if ($box.css('display') == 'none') {
                        $box.show();
                    }
                    var key = $(this).val();
                    // ajax..
                    $.ajax({
                        url: "/ajax_stock/get_stock_location_by_number",
                        type: "POST",
                        dataType: "json",
                        contentType: "application/json",
                        data: JSON.stringify({number: key}),
                        success: function (res) {
                            console.log(res);
                            // alert(res.data.length);
                            $('.sp-result').html("");
                            if (res.code == 0 && res.data!=null && res.data.length > 0) {
                                render(res.data);
                            }
                        }
                    });
                });

            }

            init();

            // 保存
            $('#save').click(function () {
                var btnObj = $(this);
                var hasClick = $(this).hasClass("hasClick");
                // alert(hasClick);
                if(hasClick == true){
                    alert("保存中，请勿重复点击")
                    return ;
                }
                btnObj.addClass("hasClick");
                var stockInItems = [];//要提交的入库数据
                var checkoutId = $("#checkoutId").val();
                var returnResult = true;//是否有错误数据
                var totalQuantity = 0;//总入库数量
                var locationNumbers = [];//入库填写的仓位
                //检查仓位
                $("input[name^='locationNumber']").each(function (i,el) {

                    var locationNumber = $(this).val();
                    var locationId = $("input[name^='locationId']").eq(i).val();
                    var quantity = $("input[name^='quantity']").eq(i).val();

                    var checkoutItemId = $("input[name^='checkoutItemId']").eq(i).val();
                    var specId = $("input[name^='specId']").eq(i).val();
                    var specNumber = $("input[name^='specNumber']").eq(i).val();

                    if (locationNumber != "" ) {
                        if(locationNumbers.indexOf(locationNumber) > -1){
                            btnObj.removeClass("hasClick");
                            alert("不能入库到相同的仓位");
                            returnResult = false;
                            return;
                        }
                        locationNumbers.push(locationNumber);
                        //选中入库，判断数量是否填写
                        if(quantity == "" || Number(quantity) <= 0 ){
                            btnObj.removeClass("hasClick");
                            alert("请输入入库数量");
                            $("input[name^='quantity']").eq(i).focus();
                            returnResult = false;
                            return;
                        }else{
                            //检查可入库数量
                            var maxQuantity = $("input[name^='maxQuantity']").eq(i).val();
                            if(Number(quantity) > Number(maxQuantity)){
                                btnObj.removeClass("hasClick");
                                alert("超出可入库数量");
                                $("input[name^='quantity']").eq(i).focus();
                                returnResult = false;
                                return;
                            }else {
                                totalQuantity += Number(quantity);
                                var item = {
                                    locationId:locationId,
                                    locationNumber:locationNumber,
                                    checkoutItemId:checkoutItemId,
                                    specId:specId,
                                    specNumber:specNumber,
                                    quantity:Number(quantity)
                                }
                                stockInItems.push(item);
                            }
                        }

                    }
                })

                if (returnResult == false) {
                    btnObj.removeClass("hasClick");
                    return false;
                }
                if (totalQuantity == 0) {
                    btnObj.removeClass("hasClick");
                    alert("没有要入库的商品");
                    return false;
                }

                var data = {
                    checkoutId:checkoutId,
                    items:stockInItems
                }

                //检查入库仓位等校验
                $.ajax({
                    url: "/ajax_stock_in/checkout_stock_in_data_checked",
                    type: "POST",
                    dataType: "json",
                    contentType: "application/json",
                    data: JSON.stringify(data),
                    success: function (res) {
                        btnObj.removeClass("hasClick");
                        if (res.code == 0) {
                            $("#stockinform").submit();
                        } else {
                            alert(res.msg);
                        }
                    }
                });



                return false;
            });
        });
    </script>


</div>
</body>
</html>